<template>
  <div class="box">
    <header class="header">
      <div class="left"><span @click="$router.go(-1)" class="iconfont icon-zuo"></span></div>
      <div class="center">地址列表</div>
      <div class="right"></div>
    </header>

    <div class="no-address" v-if="!flag">
      <img src="https://img02.hua.com/m/images/m_no_address.png?v3" />
      <p>您暂无收货地址哦…</p>
    </div>
    <div class="content">
      <ul class="address-lists">
        <li v-for="(item, index) of addressList" :key="item.addressid" class="lists">
            <div class="left">
              <p class="line1"><span>{{item.name}}</span><span>{{item.tel}}</span></p>
              <p class="line2">
                <span>{{item.province}}</span>
                <span v-if="item.city !== item.province">{{item.city}}</span>
                <span>{{item.country}}</span>
                <span>{{item.addressDetail}}</span>
              </p>
            </div>
            <div class="right">
              <div class="edit" @click="editAddress(item.addressid)">
                <span class="iconfont icon-bianji"></span>
              </div>
              <div class="delete" @click="deleteAddress(item.addressid, index)">
                <span class="iconfont icon-lajitong"></span>
              </div>
            </div>
        </li>
      </ul>
    </div>
    <div class="add-address">
      <button type="button" class="fixed-bottom-btn" @click="$router.push('/addressAdd')">
        <i class="iconfont iconfont-add1"></i>
        新建地址
      </button>
    </div>
  </div>
</template>

<script>
import { getAddressData, deleteAddress } from '@/api'
export default {
  data () {
    return {
      flag: false,
      addressList: []
    }
  },
  mounted () {
    // userid: localStorage.getItem('userid')
    getAddressData({ userid: localStorage.getItem('userid') }).then(res => {
      console.log(res.data)
      this.addressList = res.data.data
      if (this.addressList.length > 0) {
        this.flag = true
      }
    })
  },
  methods: {
    editAddress (addressid) {
      this.$router.push({ path: '/addressEdit/' + addressid })
    },
    deleteAddress (addressid, index) {
      deleteAddress({ addressid }).then(res => {
        console.log(res.data)
        if (res.data.code === '200') {
          this.addressList.splice(index, 1)
          if (!this.addressList.length) {
            this.flag = false
          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.box {
  .header {
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    padding: {
      left: 20px;
      right: 20px;
    }
  }
  .no-address {
    text-align: center;
    padding: {
      top: 50px;
      bottom: 50px;
    }
    img {
      width: 120px;
    }
    p {
      margin-top: 20px;
    }
  }
  .content {
    background-color: #E9ECF0;
    .address-lists {
      padding: 10px;
      .lists {
        // border: 1px solid #00AFC7;
        height: 70px;
        box-shadow: 0px 4px 6px 0px #dee2e5;
        border-radius: 4px;
        display: flex;
        align-items: center;
        padding: 15px;
        background-color: #FFFFFF;
        .left {
          .line1 {
            font-size: 15px;
            font-weight: 700;
            color: #232628;
            span{
              margin-right: 10px;
            }
          }
          .line2 {
            margin-top: 5px;
            font-size: 12px;
            span{
              margin-right: 5px;
            }
          }
        }
        .right {
          flex: 1;
          display: flex;
          justify-content: flex-end;
          color: #000;
          .edit{
            margin-right: 20px;
          }
        }
      }
    }
  }
  .add-address {
    width: 100%;
    position: fixed;
    bottom: 30px;
    text-align: center;
    button {
      width: 80%;
      outline: 0;
      border: 0;
      height: 50px;
      color: #fff;
      font-size: 16px;
      border-radius: 25px;
      background-color: #FF734C;
    }
  }
}
</style>
